<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>统计图表</title>
    <script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
</head>
<body style="background-color: transparent;">
<div class="container">
    <div class="row clearfix">
        <div class="col-md-6 column">
            <form class="form-inline" role="form" action="${pageContext.request.contextPath}/record/byTime">
                <div class="form-group">
                    <label class="sr-only" for="ptime1">开始日期</label>
                    <input type="date" class="form-control" name="ptime1" id="ptime1" placeholder="开始日期"/>
                </div>
                &nbsp; - &nbsp;
                <div class="form-group">
                    <label class="sr-only" for="ptime2">结束日期</label>
                    <input type="date" class="form-control" name="ptime2" id="ptime2" placeholder="结束日期"/>
                </div>
                <button type="submit" class="btn btn-default">查询</button>
            </form>
        </div>
        <div class="col-md-12 column">
            <div class="col-md-6">
                <div id="main" style="width: 600px;height:400px;" value='${recordByTime1}'></div>
            </div>
           <div class="col-md-6">
               <div id="byData" style="width: 600px;height:400px;" align="right"></div>
           </div>
        </div>
        <hr/>
        <div class="col-md-7 col-md-offset-2 column">
            <table class="table table-hover table-striped">
                <thead>
                <tr>
                    <th>日期</th>
                    <th>处罚总数</th>
                    <th>个人</th>
                    <th>单位</th>
                </tr>
                </thead>
                <tbody>
                <%-- 从数据库查询--%>
                <c:forEach var="count" items="${list}">
                    <tr>
                        <td>${count.ptime}</td>
                        <td>${count.countId}</td>
                        <td>${count.class0}</td>
                        <td>${count.class1}</td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>


<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '处罚数量统计'
        },
        tooltip: {},
        legend: {
            data:['人数']
        },
        xAxis: {
            data: ${recordByTime}
            // data: ["2020-11-09","2020/11/10","2020/11/11","2020/11/12","2020/11/13","2020/11/14"]
        },
        yAxis: {},
        series: [{
            name: '人数',
            type: 'line',
            data: ${recordByTime1}
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


    var myChart1 = echarts.init(document.getElementById('byData'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '受罚组织与个人占比'
        },
        series: [{
            name: '人数',
            type: 'pie',
            data: [
                {value:${recordByClass}[0],name:"个人"},
                {value:${recordByClass}[1],name:"组织"}

                ]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option);
</script>
</body>
</html>
